<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column")
            div(class="flex-column-item flex-center-center under-line h3") ----显示设置----
            div(class="flex-column-item flex-row h3",
            v-for="(item,index) in items",
            :class="{'selected-text': index == currentItemIndex ? true: false}")
                div(class="flex-row-item") {{item.name}}
                div(class="flex-row-ietm") {{item.value.name}}
            div(class="flex-column-item") &nbsp;
        control-select(v-model="currentItem",:visible="visible",ref="selector",v-if="!currentItem.isControlAmount")
        control-amount(v-model="currentItem",:visible="visible",ref="amountControl",v-else)
</template>

<script>
    export default {
        data() {
            return {
                items: [
                    {
                        name: "LCD常显示",
                        value: window.machine.display.LCDConstBright,
                        options: [{name: "关", value: false}, {name: "开", value: true}],
                        onChange(model) {
                            window.machine.display.LCDConstBright = model.value;
                        }
                    },
                    {
                        name: "LCD对比度:",
                        value: window.machine.display.LCDContrast,
                        max: 10,
                        min: 1,
                        increment: 1,
                        isControlAmount: true,
                        onChange(model) {
                            window.machine.display.LCDContrast = model.value;
                        }
                    }
                ],
                visible: false,
                currentItem: null,
                currentItemIndex: 0
            };
        },
        computed: {},
        methods: {
            up() {
                if (this.visible) {
                    var ref = this.currentItem.isControlAmount
                        ? this.$refs.amountControl
                        : this.$refs.selector;
                    ref.up();
                    return;
                }

                this.currentItemIndex = this.currentItemIndex == 0 ? 1 : 0;
                this.currentItem = this.items[this.currentItemIndex];
            },
            down() {
                if (this.visible) {
                    var ref = this.currentItem.isControlAmount
                        ? this.$refs.amountControl
                        : this.$refs.selector;
                    ref.down();
                    return;
                }

                this.currentItemIndex = this.currentItemIndex == 0 ? 1 : 0;
                this.currentItem = this.items[this.currentItemIndex];
            },

            back() {
                if (this.visible) {
                    this.visible = !this.visible;
                } else {
                    this.$router.push("/machine-setting?index=3");
                }
            },
            yes() {
                this.visible = !this.visible;
            }
        },
        created() {
            this.currentItem = this.items[0];
        }
    };
</script>

<style lang="less">
</style>
